<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%@ 
	taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %><%@ 
	taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%><%@ 
	tag import="com.yaodian100.core.common.utils.ServerValue"%><%@ 
	tag import="org.apache.commons.lang.StringUtils"%><%@ 
	tag pageEncoding="UTF-8"%>
<%-- required attributes --%>
<%@ attribute name="productId" required="true" %><%@ 
	attribute name="postfix" rtexprvalue="true" %><%@ 
	attribute name="blankPostfix"%><%@ 
	attribute name="size"%>
<%-- optional attributes --%>
<%@ attribute name="lazy"%><%@ 
	attribute name="placeholderFileName"%><%@ 
	attribute name="type"%><%-- 配合 size 使用（有設定 size，且沒有設定 postfix 的時候才有作用） --%>
<%--html img tag attributes--%>
<%@ attribute name="alt"%><%@ 
	attribute name="height"%><%@ 
	attribute name="ismap"%><%@ 
	attribute name="longdesc"%><%@ 
	attribute name="usemap"%><%@ 
	attribute name="vspace"%><%@ 
	attribute name="width"%>
<%--standard attributes--%>
<%@ attribute name="cssClass"%><%-- translated attribute --%><%@ 
	attribute name="dir"%><%@ 
	attribute name="id"%><%@ 
	attribute name="lang"%><%@ 
	attribute name="style"%><%@ 
	attribute name="title"%><%@ 
	attribute name="xmlLang"%><%-- translated attribute --%>
<%--event attributes--%>
<%@ attribute name="onabort"%><%@ 
	attribute name="onclick"%><%@ 
	attribute name="ondblclick"%><%@ 
	attribute name="onmousedown"%><%@ 
	attribute name="onmousemove"%><%@ 
	attribute name="onmouseout"%><%@ 
	attribute name="onmouseover"%><%@ 
	attribute name="onmouseup"%><%@ 
	attribute name="onkeydown"%><%@ 
	attribute name="onkeypress"%><%@ 
	attribute name="onkeyup"%><%@ 
	attribute name="onerror"%>

<c-rt:set var="imgDomain"><%=ServerValue.getImgDomain()%></c-rt:set>
<c-rt:set var="imgAttributesString" ></c-rt:set>
<%-- default placeholderFileName --%>
<c:if test="${empty placeholderFileName}">
	<c:set var="placeholderFileName" >none1</c:set>
</c:if>
<%-- default type --%>
<c:if test="${empty pageScope.type}">
	<c:set var="type" >m</c:set>
</c:if>

<%-- 用 size 可以產生預設的 postfix, height, width, blankPostfix，但是這 4 個屬性分別可以再 override 掉產生出來的預設值 --%>
<c:choose>
	<c:when test="${not empty pageScope.size}">
		<c:if test="${empty pageScope.height}">
			<c:set var="imgAttributesString" >${imgAttributesString} height="${pageScope.size}"</c:set>
		</c:if>
		<c:if test="${empty pageScope.width}">
			<c:set var="imgAttributesString" >${imgAttributesString} width="${pageScope.size}"</c:set>
		</c:if>
		<c:if test="${empty postfix}">
			<c:set var="postfix" >${pageScope.type}${pageScope.size}</c:set>
		</c:if>
		<c:if test="${empty blankPostfix}">
			<c:set var="blankPostfix" >${pageScope.size}</c:set>
		</c:if>
	</c:when>
</c:choose>
<%-- postfix override size --%>
<c:if test="${not empty postfix && empty blankPostfix}">
	<%
	StringBuffer numberStringInPostfix = new StringBuffer();
	String postfix = (String) jspContext.getAttribute("postfix");
	boolean startAppending = false;
	for (int i = 0; i < postfix.length(); i++) {
		String oneCharacter = String.valueOf(postfix.charAt(i));
		if (StringUtils.isNumeric(oneCharacter)) {
			numberStringInPostfix.append(oneCharacter);
		}
	}
	String blankPostfix = numberStringInPostfix.toString();
	jspContext.setAttribute("blankPostfix", blankPostfix);
	%>
</c:if>

<%--html img tag attributes--%>
<c:if test="${not empty pageScope.height}">
	<c:set var="imgAttributesString" >${imgAttributesString} height="${pageScope.height}"</c:set>
</c:if>
<c:if test="${not empty ismap}">
	<c:set var="imgAttributesString" >${imgAttributesString} ismap="${ismap}"</c:set>
</c:if>
<c:if test="${not empty longdesc}">
	<c:set var="imgAttributesString" >${imgAttributesString} longdesc="${longdesc}"</c:set>
</c:if>
<c:if test="${not empty usemap}">
	<c:set var="imgAttributesString" >${imgAttributesString} usemap="${usemap}"</c:set>
</c:if>
<c:if test="${not empty vspace}">
	<c:set var="imgAttributesString" >${imgAttributesString} vspace="${vspace}"</c:set>
</c:if>
<c:if test="${not empty pageScope.width}">
	<c:set var="imgAttributesString" >${imgAttributesString} width="${pageScope.width}"</c:set>
</c:if>

<%--standard attributes--%>
<c:if test="${not empty cssClass}"><%-- translated attribute --%>
	<c:set var="imgAttributesString" >${imgAttributesString} class="${cssClass}"</c:set>
</c:if>
<c:if test="${not empty dir}">
	<c:set var="imgAttributesString" >${imgAttributesString} dir="${dir}"</c:set>
</c:if>
<c:if test="${not empty pageScope.id}">
	<c:set var="imgAttributesString" >${imgAttributesString} id="${pageScope.id}"</c:set>
</c:if>
<c:if test="${not empty lang}">
	<c:set var="imgAttributesString" >${imgAttributesString} lang="${lang}"</c:set>
</c:if>
<c:if test="${not empty style}">
	<c:set var="imgAttributesString" >${imgAttributesString} style="${style}"</c:set>
</c:if>
<c:if test="${not empty pageScope.title}">
	<c:set var="imgAttributesString" >${imgAttributesString} title="${pageScope.title}"</c:set>
</c:if>
<c:if test="${not empty xmlLang}">
	<c:set var="imgAttributesString" >${imgAttributesString} xml:lang="${xmlLang}"</c:set>
</c:if>

<%--event attributes--%>
<c:if test="${not empty onabort}">
	<c:set var="imgAttributesString" >${imgAttributesString} onabort="${onabort}"</c:set>
</c:if>
<c:if test="${not empty onclick}">
	<c:set var="imgAttributesString" >${imgAttributesString} onclick="${onclick}"</c:set>
</c:if>
<c:if test="${not empty ondblclick}">
	<c:set var="imgAttributesString" >${imgAttributesString} ondblclick="${ondblclick}"</c:set>
</c:if>
<c:if test="${not empty onmousedown}">
	<c:set var="imgAttributesString" >${imgAttributesString} onmousedown="${onmousedown}"</c:set>
</c:if>
<c:if test="${not empty onmousemove}">
	<c:set var="imgAttributesString" >${imgAttributesString} onmousemove="${onmousemove}"</c:set>
</c:if>
<c:if test="${not empty onmouseout}">
	<c:set var="imgAttributesString" >${imgAttributesString} onmouseout="${onmouseout}"</c:set>
</c:if>
<c:if test="${not empty onmouseover}">
	<c:set var="imgAttributesString" >${imgAttributesString} onmouseover="${onmouseover}"</c:set>
</c:if>
<c:if test="${not empty onmouseup}">
	<c:set var="imgAttributesString" >${imgAttributesString} onmouseup="${onmouseup}"</c:set>
</c:if>
<c:if test="${not empty onkeydown}">
	<c:set var="imgAttributesString" >${imgAttributesString} onkeydown="${onkeydown}"</c:set>
</c:if>
<c:if test="${not empty onkeypress}">
	<c:set var="imgAttributesString" >${imgAttributesString} onkeypress="${onkeypress}"</c:set>
</c:if>
<c:if test="${not empty onkeyup}">
	<c:set var="imgAttributesString" >${imgAttributesString} onkeyup="${onkeyup}"</c:set>
</c:if>

<%-- default onerror --%>
<c:choose>
	<c:when test="${onerror == null}">
		<c:set var="onerrorAttributeString" >onerror="this.src='${imgDomain}/PImg/blank_${blankPostfix}.gif'"</c:set>
	</c:when>
    <c:otherwise>
		<c:set var="onerrorAttributeString" >onerror="${onerror}"</c:set>
    </c:otherwise>
</c:choose>

<c:choose>
	<c:when test='${empty postfix && empty pageScope.size}'>
		<img src="${imgDomain}/images/${placeholderFileName}.gif" alt="${alt}" onerror="this.src='${imgDomain}/images/${placeholderFileName}.gif'" />
	</c:when>
	<%--判斷 product id 長度，避免 ArrayIndexOutOfBoundException--%>
	<c:when test='${fn:length(pageScope.productId) < 4}'>
		<img src="${imgDomain}/PImg/blank_${blankPostfix}.gif" alt="${alt}" onerror="this.src='${imgDomain}/images/${placeholderFileName}.gif'" />
	</c:when>
    <c:otherwise>
    	<%--依是否要做 lazy load 產生 html--%>
		<c:choose>
			<c:when test='${lazy}'>
				<img src="${imgDomain}/images/${placeholderFileName}.gif" original="${imgDomain}/PImg/${fn:substring(pageScope.productId, 0, 4)}/${pageScope.productId}/${pageScope.productId}_${postfix}.jpg" ${onerrorAttributeString} alt="${alt}" ${imgAttributesString} />
			</c:when>
			<c:otherwise>
				<img src="${imgDomain}/PImg/${fn:substring(pageScope.productId, 0, 4)}/${pageScope.productId}/${pageScope.productId}_${postfix}.jpg" ${onerrorAttributeString} alt="${alt}" ${imgAttributesString} />
			</c:otherwise>
		</c:choose>
    </c:otherwise>
</c:choose>
